<!DOCTYPE html>
<html>

<head>
    <title>a15_SubmitForm</title>
    <meta charset="utf-8">
    <style>
        .syntax {
            color: red;
        }

        .colorRed {
            color: red;
        }

        .colorGreen {
            color: green;
        }

        .colorBlue {
            color: blue;
        }
    </style>
    <script src="https://localhost/script/jquery-3.5.1.js"></script>
    <script src="https://localhost/script/jquery-ui-1.12.1/jquery-ui.js"></script>

    <script>
        console.log("jQuery version: " + $.fn.jquery);
        console.log("jQuery UI version: " + $.ui.version);

        $(function(){
            $(document).on('change', '.autosubmit', function(){
                $(this).closest('form').trigger('submit');
            })
        });
    </script>
</head>

<body>
    
    <code>
    部署说明:
    1)是apache + php
    2)script/目录拷贝到apache的htdocs/
    3)该a15目录拷贝到apache的htdocs/
    </code>
    <h1>自动提交</h1>
    选择宠物后自动submit. 
    <form method="GET" action="selectPet.php">
        <input type="hidden" name="done" value="false"/>
        <fieldset>
            <legend>心仪的宠物</legend>
            <label for="pet-id">请选择:</label>
            <select name="pet" id="pet-id" class="autosubmit">
                <option value="">----</option>
                <option value="cat">猫咪</option>
                <option value="dog">狗狗</option>
                <option value="turtle">乌龟</option>
                <option value="hedgehog">刺猬</option>
                <option value="parrot">鹦鹉</option>
                <option value="duck">鸭子</option>
            </select>
        </fieldset>
    </form>
    <h1>正常提交</h1>
    选择宠物后自动submit. 
    <form method="GET" action="selectPet.php">
        <input type="hidden" name="done" value="false"/>
        <fieldset>
            <legend>心仪的宠物</legend>
            <label for="pet-id">请选择:</label>
            <select name="pet" id="pet-id">
                <option value="">----</option>
                <option value="cat">猫咪</option>
                <option value="dog">狗狗</option>
                <option value="turtle">乌龟</option>
                <option value="hedgehog">刺猬</option>
                <option value="parrot">鹦鹉</option>
                <option value="duck">鸭子</option>
            </select>
        </fieldset>
        <input type="submit" value="提交"/>
    </form>
</body>

</html>